<template>

  <el-form ref="ruleFormRef" style="max-width: 600px" :model="startQuery" :rules="rules" label-width="auto"
    class="demo-ruleForm" :size="formSize" status-icon>

    <el-form-item label="入库日期" earTagInHouseDate>
      <el-col :span="11">
        <el-form-item prop="earTagInHouseDate">
          <el-date-picker v-model="startQuery.earTagInHouseDate" type="date" placeholder="请选择日期" style="width: 100%" />
        </el-form-item>
      </el-col>
    </el-form-item>


    <el-form-item label="品种" prop="earTagBreeds">
      <el-select v-model="startQuery.earTagBreeds" placeholder="请选择" size="large" style="width: 240px">
        <el-option v-for="item in GetBreed" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
    </el-form-item>



    <el-form-item label="出生状态" prop="earTagBirthStatus">
      <el-select v-model="startQuery.earTagBirthStatus" placeholder="请选择">
        <el-option label="死羔" :value="1" />s
        <el-option label="活羔" :value="2" />
        <el-option label="健羔" :value="3" />
        <el-option label="弱羔" :value="4" />
        <el-option label="畸形" :value="5" />
      </el-select>
    </el-form-item>


    <!-- <el-form-item label="使用状态" prop="earTagUseStatus">
      <el-select v-model="startQuery.earTagUseStatus" placeholder="请选择">
        <el-option label="使用" :value="1" />
        <el-option label="未使用" :value="0" />

      </el-select>
    </el-form-item> -->



    <el-form-item label="添加方式" prop="resource">
      <el-radio-group v-model="isShow">
        <el-radio value="1">单个新增</el-radio>
        <el-radio value="2">批量新增</el-radio>
      </el-radio-group>
    </el-form-item>


    <el-form-item v-if="isShow == 1" label="耳号" prop="earTagNumber">
      <el-input v-model="startQuery.earTagNumber" />
    </el-form-item>


    <!-- <div v-if="isShow == 2"> -->
    <el-form-item v-if="isShow == 2" label="开始耳号" prop="beforNumber">
      <el-input v-model="startQuery.beforNumber" />
    </el-form-item>


    <el-form-item v-if="isShow == 2" label="耳号数量" prop="afterNumber">
      <el-input v-model="startQuery.afterNumber" />
    </el-form-item>
    <!-- </div> -->





    <el-form-item>
      <el-button @click="submitForm(ruleFormRef)">添加</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import starts from "@/api/EarTagManagement/index";
import start from "@/api/EarTagManagement/index";
import { EartagAdd } from "@/api/EarTagManagement/model";
import axios from "axios";
import { number } from "echarts";
import { useRouter, useRoute } from 'vue-router';
const useRoutes = useRouter()
const isShow = ref()


const formSize = ref('default')
const ruleFormRef = ref()


const startQuery = reactive<EartagAdd>({

  earTagNumber: "",
  beforNumber: null,
  afterNumber: null,
  earTagBreeds: null,
  earTagInHouseDate: "2024-07-30",
  earTagBirthStatus: null,
  earTagUseStatus: 0
});

const GetBreed = ref([])
const GetShowEarBreed = () => {
  starts.GetShowbreed().then((res: any) => {
    GetBreed.value = res.data
  })
}

onMounted(() => {
  GetShowEarBreed()
})

const rules = reactive({
  earTagNumber: [
    { required: true, message: '耳号不能为空', trigger: 'blur' }
  ],
  beforNumber: [
    { required: true, message: '开始耳号不能为空', trigger: 'blur' }
  ],
  afterNumber: [
    { required: true, message: '耳号数量不能为空', trigger: 'blur' }
  ],
  earTagBreeds: [
    { required: true, message: '品种不能为空', trigger: 'blur' }
  ],
  earTagInHouseDate: [
    { required: true, message: '出生日期不能为空', trigger: 'blur' }
  ],
  earTagBirthStatus: [
    { required: true, message: '出生状态不能为空', trigger: 'blur' }
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fieldas) => {
    if (valid) {
      starts.Addinfo(startQuery).then(res => {
        if (res.data > 0) {
          ElMessage.success("添加成功");
          useRoutes.push("/EarList")
        }
        else if (res.data == -1) {
          ElMessage.error("耳号已存在");
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}


</script>